<template>
  <view>
    <view class="functionArray-item" :class="item.buttonText ? '' : 'functionArray-item-after'"
      v-for="(item,index) in functionArray" :key="index" @click="functionItemClick(item.name)">
      <view style="display: flex;flex-direction: column;">
        <view>
          <text style="margin-right: 25rpx;">{{item.name}}</text>
          <text>{{item.value}}</text>
        </view>
        <text style="color: #bbb;font-size: 11px;">{{item.describe}}</text>
      </view>

      <!-- 绑定邮箱、更换绑定按钮 -->
      <view class="button" v-if="item.isButton" @click="buttonClick(item.buttonText)">
        <text>{{item.buttonText}}</text>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        // 功能项list数组
        functionArray: [{
          name: '邮箱号',
          value: '',
          isButton: true,
          buttonText: ''
        }, {
          name: '修改密码',
        }, {
          name: '永久注销账号',
          describe: '注销后信息无法恢复，请谨慎操作'
        }],
        // 用户基本信息(根据token获取到的)
        user: {},
        token: ''
      };
    },
    async onLoad() {
      // 页面加载时获取 token
      this.token = await uni.getStorageSync('token')

      // 查询用户基本信息
      await this.getUserInfo(this.token)
    },
    async onShow() {
      // 获取上一页面的返回消息体
      // 1. 从绑定邮箱页面回来的
      if (uni.getStorageSync('isEmailBinDing')) {
        // 为真则重新刷新页面数据
        // 打开加载框
        uni.showLoading({
          title: '正在加载中...'
        })

        // 重新拉取查询用户基本信息
        await this.getUserInfo(this.token)

        // 清空返回消息体
        uni.removeStorageSync('isEmailBinDing')

        // 关闭加载框
        uni.hideLoading()
      }
    },
    methods: {
      /**
       * @deprecated 右侧按钮点击
       */
      buttonClick(name) {
        if (name == '绑定邮箱') {
          uni.navigateTo({
            url: 'emailBinDing/emailBinDing'
          })
          return
        }

        if (name == '更换绑定') {
          uni.navigateTo({
            url: `emailBinDing/emailBinDing?title=更换绑定&email=${this.user.email}&emailMask=${this.functionArray[0].value}`
          })
          return
        }
      },

      /**
       * @deprecated 功能项点击 【修改密码、永久注销账号】
       */
      functionItemClick(name) {
        console.log("name: ", name);
        if (name == '修改密码') {
          uni.navigateTo({
            url: '/pages/userSecurityBinding/modifyPassword/modifyPassword'
          })
        }
      },

      /**
       * @deprecated 查询用户基本信息
       */
      async getUserInfo() {
        await this.$http.user.getUserInfoByToken(this.token).then(res => {
          console.log("res: " + JSON.stringify(res));
          if (res.code == 401) {
            if (res.msg == '账户信息已过期，请重新登录') {
              // 清除用户缓存并刷新页面数据
              this.user = {}
              this.token = ''
              this.$forceUpdate()
            }
            uni.showToast({
              title: res.msg,
              icon: 'none',
              position: 'center'
            })
            return
          } else if (!res.code) {
            // 服务器错误，获取不到数据
            // 清除用户缓存并刷新页面数据
            this.user = {}
            this.token = ''
            this.$forceUpdate()
            uni.showToast({
              title: '服务器开小差了',
              icon: 'none',
              position: 'center'
            })
            return
          }

          this.user = res.data
          if (this.user.email != null && this.user.email) {
            this.functionArray[0].value = this.user.email.substr(0, 3) + '****' + this.user.email.substr(7, this
              .user.email.length)
            this.functionArray[0].buttonText = '更换绑定'
            return
          }
          if (this.user.email == null || !this.user.email) {
            this.functionArray[0].buttonText = '绑定邮箱'
            return
          }
        }).catch(err => {
          console.log("res: " + JSON.stringify(res));
        })
      }
    }
  }
</script>

<style lang="scss">
  .functionArray-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #f0f0f0;
    height: 100rpx;
    padding: 0 25rpx;

    & .button {
      background: #000;
      color: #fff;
      padding: 10rpx 25rpx;
      border-radius: 3px;
    }
  }

  .functionArray-item-after::after {
    content: " ";
    display: inline-block;
    vertical-align: middle;
    height: 8px;
    width: 8px;
    border-width: 2px 2px 0 0;
    border-color: #bbb;
    border-style: solid;
    -webkit-transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
    transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
    border-radius: 1px;
  }
</style>
